<template>
  <div class="points-order">
    <el-card>
      <div class="header">
        <span></span>
      </div>
      <el-form :inline="true" :model="filter" class="filter-bar" label-width="90px" style="margin-bottom: 16px;">
        <el-form-item label="下单时间">
          <el-date-picker v-model="filter.date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="filter.status" clearable style="width: 160px;">
            <el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="订单类型">
          <el-select v-model="filter.type" clearable style="width: 160px;">
            <el-option v-for="item in typeOptions" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="用户信息">
          <el-input v-model="filter.user" placeholder="昵称/ID" clearable style="width: 160px;" />
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="filter.goods" placeholder="商品名称/编号" clearable style="width: 160px;" />
        </el-form-item>
        <div class="filter-actions-row">
          <el-button type="primary" @click="doFilter">查询</el-button>
          <el-button @click="resetFilter">重置</el-button>
          <el-button @click="refresh">刷新</el-button>
          <el-button type="primary" @click="exportOrder">导出</el-button>
        </div>
      </el-form>
      <el-table :data="tableData" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
        <el-table-column prop="orderNo" label="订单编号" width="160" />
        <el-table-column prop="date" label="下单时间" width="160" sortable />
        <el-table-column prop="userId" label="用户ID" width="100" />
        <el-table-column prop="userName" label="昵称" width="120" />
        <el-table-column prop="userType" label="用户类型" width="80" />
        <el-table-column prop="type" label="订单类型" width="120" />
        <el-table-column prop="status" label="订单状态" width="100" />
        <el-table-column prop="goodsName" label="商品名称" width="160" />
        <el-table-column prop="platformId" label="平台ID" width="100" />
        <el-table-column prop="goodsNum" label="数量" width="80" />
        <el-table-column prop="points" label="消耗积分" width="100" />
        <el-table-column prop="amount" label="实付金额" width="100" />
        <el-table-column prop="remark" label="备注" min-width="120" />
      </el-table>
      <el-pagination
        v-model:current-page="page.current"
        v-model:page-size="page.size"
        :total="page.total"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 50, 100]"
        style="margin-top: 16px; text-align: right;"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'

const statusOptions = ['待发货', '已发货', '已完成', '已取消', '已关闭']
const typeOptions = ['积分兑换商品', '积分兑换优惠券', '积分抽奖', '积分抵现']

const filter = reactive({
  date: '',
  status: '',
  type: '',
  user: '',
  goods: ''
})

const allData = ref([
  {
    orderNo: 'JFD20240610001', date: '2024-06-10 10:00:00', userId: '1001', userName: '张三', userType: 'C', type: '积分兑换商品', status: '待发货', goodsName: '蓝牙耳机', platformId: 'PLT001', goodsNum: 1, points: 1200, amount: 0, remark: ''
  },
  {
    orderNo: 'JFD20240609002', date: '2024-06-09 15:30:00', userId: '1002', userName: '李四', userType: 'B', type: '积分兑换优惠券', status: '已完成', goodsName: '50元优惠券', platformId: 'PLT002', goodsNum: 1, points: 500, amount: 0, remark: '自动发券'
  },
  {
    orderNo: 'JFD20240608003', date: '2024-06-08 09:20:00', userId: '1003', userName: '王五', userType: 'C', type: '积分抽奖', status: '已完成', goodsName: '小米手环', platformId: 'PLT003', goodsNum: 1, points: 800, amount: 0, remark: ''
  },
  {
    orderNo: 'JFD20240607004', date: '2024-06-07 11:10:00', userId: '1004', userName: '赵六', userType: 'C', type: '积分抵现', status: '已取消', goodsName: '订单抵现', platformId: 'PLT004', goodsNum: 1, points: 300, amount: 30, remark: '用户取消'
  },
  {
    orderNo: 'JFD20240606005', date: '2024-06-06 14:00:00', userId: '1005', userName: '孙七', userType: 'B', type: '积分兑换商品', status: '已发货', goodsName: '保温杯', platformId: 'PLT005', goodsNum: 2, points: 1600, amount: 0, remark: ''
  }
])

const page = reactive({ current: 1, size: 10, total: 0 })

const tableData = computed(() => {
  let data = allData.value
  // 筛选逻辑
  if (filter.date && filter.date.length === 2) {
    const [start, end] = filter.date
    data = data.filter(row => row.date >= start && row.date <= end)
  }
  if (filter.status) {
    data = data.filter(row => row.status === filter.status)
  }
  if (filter.type) {
    data = data.filter(row => row.type === filter.type)
  }
  if (filter.user) {
    data = data.filter(row => row.userId.includes(filter.user) || row.userName.includes(filter.user))
  }
  if (filter.goods) {
    data = data.filter(row => row.goodsName.includes(filter.goods) || row.platformId.includes(filter.goods))
  }
  page.total = data.length
  const startIdx = (page.current - 1) * page.size
  return data.slice(startIdx, startIdx + page.size)
})

function doFilter() {
  page.current = 1
}
function resetFilter() {
  filter.date = ''
  filter.status = ''
  filter.type = ''
  filter.user = ''
  filter.goods = ''
  page.current = 1
}
function refresh() {
  ElMessage.success('已刷新（mock）')
}
function exportOrder() {
  ElMessage.success('导出成功（mock）')
}
</script>

<style scoped>
.points-order { padding: 32px; }
.header { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.filter-bar { margin-bottom: 16px; }
.filter-actions-row { margin-top: 8px; display: flex; gap: 12px; }
</style> 